<template>
  <div class="recommend">
    <grid :border="false">
      <grid-item
        v-for="(item, index) in recommend"
        :key="index"
        :url="item.link"
      >
        <vant-image
          :src="item.image"
          round
          lazy-load
          width="80"
          height="80"
        ></vant-image>
        <p class="title">{{ item.title }}</p>
      </grid-item>
    </grid>
  </div>
</template>

<script>
import { Grid, GridItem, Image as vantImage } from "vant";

export default {
  name: "recommend",
  props: {
    recommend: {
      type: Array
    }
  },
  components: {
    Grid,
    GridItem,
    vantImage
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {
    // console.log(this.recommend,1111);
  }
};
</script>

<style scoped lang="scss">
.recommend {
  border-bottom: 10px solid #eee;
}
::v-deep .van-grid-item__content {
  padding: 14px 0;
}
.title {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}
</style>
